<script setup lang="ts">
  import { nextTick,ref } from "vue"
  import G6 from "@antv/g6"

  let antvG6Graph
  let dialogVisible = ref(false)
  const closeDialog = () => {
    dialogVisible.value = false
  }

  const remoteData3 = {
    id: "1",
    type: 'dd',
    label: '111',
    children: [
      {
        id: "1-1",
        type: 'dd',
        label: '222',
        children: [
          {
            id: "1-1-1",
            label: '菱形1'
          },
          {
            id: "1-1-2"
          }
        ]
      },
      {
        id: "1-2",
      }
    ]
  }
  let graph
  async function main() {
    graph = new G6.TreeGraph({
      container: 'mountNodes', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
      width: 1200, // Number，必须，图的宽度
      height: 700, // Number，必须，图的高度
      fitView: true,
      fitViewPadding: 200,
      minZoom: 1,
      maxZoom: 3,
      renderer: "canvas",
      // 点在默认状态下的样式配置（style）和其他配置
      defaultNode: {
        size: 30, // 节点大小
        style: {
          fill: 'steelblue', // 节点填充色
          stroke: '#666', // 节点描边色
          lineWidth: 1, // 节点描边粗细
        },
        // 节点上的标签文本配置
        labelCfg: {
          // 节点上的标签文本样式配置
          style: {
            fill: '#000', // 节点标签文字颜色
          },
        },
      },
      // 边在默认状态下的样式配置（style）和其他配置
      defaultEdge: {
        type: "arrow-running",
        style: {
          lineWidth: 2,
          stroke: "#bae7ff"
        },
        // 边上的标签文本配置
        labelCfg: {
          autoRotate: true, // 边上的标签文本根据边的方向旋转
        },
      },
      nodeStateStyles: {
        // 鼠标 hover 上节点，即 hover 状态为 true 时的样式
        hover: {
          fill: 'lightsteelblue',
        },
        // 鼠标点击节点，即 click 状态为 true 时的样式
        click: {
          stroke: '#000',
          lineWidth: 3,
        },
        closest: {
          fill: '#f00',
        },
      },
      // 边不同状态下的样式集合
      edgeStateStyles: {
        // 鼠标点击边，即 click 状态为 true 时的样式
        click: {
          stroke: 'steelblue',
        },
      },
      modes: {
        // 允许拖拽画布、放缩画布、拖拽节点
        default: ['drag-canvas', 'zoom-canvas', 'drag-node',
          {
            type: 'tooltip', // 提示框
            formatText(model) {
              // 提示框文本内容
              const text = 'id: ' + model.id
              return text
            }
          },
          {
            type: 'edge-tooltip', // 边提示框
            formatText(model) {
              // 边提示框文本内容
              const text =
                'source: ' +
                model.source +
                '<br/> target: ' +
                model.target
              return text
            },
          },
        ]
      },
      layout: {
        type: 'compactBox', // 布局类型
        direction: 'TB', // 自左至右布局，可选的有 H / V / LR / RL / TB / BT
        nodeSep: 200, // 节点之间间距
        rankSep: 200, // 每个层级之间的间距
        excludeInvisibles: true, // 布局计算是否排除掉隐藏的节点，v4.8.8 起支持
      },
    })
    customNode()
    graph.data(remoteData3) // 加载远程数据
    graph.render() // 渲染
  }
  function customNode() {
    G6.registerNode('dd', {
      draw(cfg, group) {
        // 如果 cfg 中定义了 style 需要同这里的属性进行融合
        const keyShape = group.addShape('path', {
          attrs: {
            path: this.getPath(cfg), // 根据配置获取路径
            stroke: "#000", // 颜色应用到描边上，如果应用到填充，则使用 fill: cfg.color
          },
          // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
          name: 'path-shape',
          // 设置 draggable 以允许响应鼠标的图拽事件
          draggable: true,
        })
        if (cfg.label) {
          // 如果有文本
          // 如果需要复杂的文本配置项，可以通过 labeCfg 传入
          // const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
          // style.text = cfg.label;
          const label = group.addShape('text', {
            // attrs: style
            attrs: {
              x: 0, // 居中
              y: 0,
              textAlign: 'center',
              textBaseline: 'middle',
              text: cfg.label,
              fill: '#666',
            },
            // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
            name: 'text-shape',
            // 设置 draggable 以允许响应鼠标的图拽事件
            draggable: true,
          })
        }
        return keyShape
      },
      // 返回菱形的路径
      getPath(cfg) {
        const width = 30
        const height = 30
        //  / 1 \
        // 4     2
        //  \ 3 /
        const path = [
          ['M', 0, 0 - height / 2], // 上部顶点
          ['L', width / 2, 0], // 右侧顶点
          ['L', 0, height / 2], // 下部顶点
          ['L', -width / 2, 0], // 左侧顶点
          ['Z'], // 封闭
        ]
        return path
      },
    })
  }
  const openDialog = () => {
    dialogVisible.value = true
    nextTick(() => {
      main()
    })
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <el-dialog class="main-dialog" title="子设备" v-model="dialogVisible" width="80%" @close="closeDialog">
    <div>11111</div>
    <el-button>123</el-button>
    <div id="mountNodes"></div>
  </el-dialog>
</template>

<style scoped>

</style>